<template>
     <view>
          <div class="xingxi">
               <view class="oinput">
                    <span>姓名<span class="redxx">*</span></span>
                    <span>
                         <div>{{from.nickname}}</div>
                    </span>
               </view>
               <!-- <view class="oinput">
                    <span>性别</span>
                    {{sexname}}
               </view> -->

               <view class="oinput">
                    <span>手机号</span>
                    <span>
                         <div>{{from.phone}}</div>
                    </span>
               </view>
               <view class="oinput">
                    <span>微信号</span>
                    <span>
                         <div>{{from.wechat}}</div>
                    </span>
               </view>
               <view class="oinput">
                    <span>企业微信</span>
                    <span>
                         <div>{{from.wecom}}</div>
                    </span>
               </view>
               <view class="oinput">
                    <span>邮箱</span>
                    <span>
                         <div>{{from.email}}</div>
                    </span>
               </view>
          </div>
          <div class="enter">
               <view class="oinput">
                    <span>职位</span>
                    <span class="biaoji">
                         {{from.position_name}}
                         <image :src="imgHost + '/index/right.png'" mode=""></image>
                    </span>
               </view>
               <view class="oinput">
                    <span>企业</span>
                    <span class="biaoji">
                         {{qiyexx.name}}
                         <image :src="imgHost + '/index/right.png'" mode=""></image>
                    </span>
               </view>
          </div>
          <div class="enter">
               <view class="oinput">
                    <span>备注</span>
                    <span>
                         <input type="text" v-model="from.client_remark" placeholder="备注">
                    </span>
               </view>
               <view class="oinput" >
                    <span>标签</span>
                    <span class="bianji">
                         <image :src="imgHost + '/index/right.png'" mode=""></image>
                    </span>
               </view>
               <div class='biaoqian'>
                    <span v-for="(item,index) in biaoer" :key="index">{{item}}</span>
               </div>
               <view class="odiv">
                    <span>标签能对客户进行分类，可用于筛选和搜索</span>
               </view>
               <view class="oinput">
                    <span>共享范围<span class="redxx">*</span></span>
                    <view class="">
                         <radio-group @change="chang"  >
                              <label  v-for="(item,index) in gxfw" :key="index" style="margin-right: 30rpx;">
                                   <radio style="margin-right: 15rpx; vertical-align: middle; width: 40rpx;height: 42rpx; background-color:red; border-radius: 100%;overflow: hidden;"  :value="item.index" :checked="item.name==biaoqRadio" />{{item.name}}
                              </label>
                         </radio-group>
                    </view>
               </view>
               <view class="odiv">
                    <span>独占客户只能自己查看，共享客户全企业可查看</span>
               </view>
               <view class="oinput" @click="manewr">
                    <span>成交金额</span>
                    <span class="bianji">
                         {{cjje}}
                         <image :src="imgHost + '/index/right.png'" mode=""></image>
                    </span>
               </view>
          </div>
          <div class="qued" @click="yes">保存</div>
          <div class="no" @click="deleteCard">删除</div>
          <uni-popup ref="iftj" type="center">
          	<view class="oview">
          		<span>无法添加</span>
          		<p>该客户已被成员<span>{{from.client_name}}</span>独占，请与他取得联系</p>
          		<div class="yesno">
          			<div @click="quxiao">取消</div>
          			<div @click="queding">确定</div>
          		</div>
          	</view>
          </uni-popup>
          <uni-popup ref="maner" type="bottom">
               <div class="oerter">
                    <h3>成交金额</h3>
                    <view class="manerer">
                        <input type="text" placeholder="请输入成交金额" v-model="from.client_money">
                        <input type="text" placeholder="备注">
                    </view>
                    <div>
                         <view @click="nopopup">取消</view>
                         <view @click="quding">确定</view>
                    </div>
               </div>
          </uni-popup>
     </view>
</template>

<script>
     import {
          HTTP_REQUEST_URL
     } from '@/config/app.js';
     import {
          carduser,
          addenter,
          get_position,
          get_enterprise,
          savent,
		  deleteCard
     } from '@/api/userminp.js'
     export default {
          data() {
               return {
                    biaoer: [],
                    cjje: "请输入成交金额",
                    biaoqRadio: '共享',
                    imgHost: HTTP_REQUEST_URL + '/mingpian',
                    from:[],
                    qiyexx:[],
                    sexname: '',
                    gxfw: [{
                              name: '共享',
                              index:'1',
                         },
                         {
                              name: '独占',
                              index:'2'
                         }
                    ],
                    share_uid: '',
                    // tianjia:{
                    //      client_uid:'',
                    //      client_remark:'',
                    //      client_type:"",
                    //      client_money:''
                    // }

               };
          },
          onShow() {
               this.getcard_user()
          },
          onLoad(options) {
               this.share_uid = options.share
          },
          methods: {
               quding() {
                    this.cjje = this.from.client_money
                    this.$refs.maner.close()
               },
               nopopup() {
                    this.$refs.maner.close()
               },
			   // 删除名片
			   deleteCard(){
				   deleteCard({
				   	del_id:this.share_uid
				   }).then(res=>{
					   uni.showToast({
						title:res.message
					   })
					   setTimeout(()=>{
						   uni.navigateBack({
							   delta:2
						   })
						 //   uni.reLaunch({
							// url:"/pages/userminp/mine/mpjia/mpjia"
						 //   })
					   },1000)
				   }).catch(err=>{
					   uni.showToast({
					   	title:err,
						icon:"none"
					   })
				   })
			   },
               manewr() {
                    this.$refs.maner.open('center')
               },
           
               biaoqyes() {
                    this.$refs.popup.close()
               },
               bijibqer() {
                    uni.navigateTo({
                         url: '/pages/userminp/biaoqian/biaoqian'
                    })
               },

               chang(e) {
                    this.from.client_type=e.detail.value
                    this.activeRadio = e.detail.value; //选中按钮的value值
               },
               // 名片信息
               getcard_user() {
                    let then=this
                    carduser({
                         share_uid: this.share_uid
                    }).then((res) => {
                         this.sexname = res.data.sex == 0 ? '未知' : '' || res.data.sex == 1 ? '男' : '' || res.data.sex == 2 ?
                              '女' : ''
                         then.from=res.data
                         then.from.client_uid=res.data.uid
						 if(then.from.client_money){
							 then.cjje = then.from.client_money
						 }
                         this.qiyexx = res.data.enterprise == null ? [] : res.data.enterprise
                         this.biaoer=JSON.parse(res.data.label_names)
                    }).catch(re => {
                         uni.showToast({
                              title: re,
                              icon: 'none'
                         })
                    })
               },
               quxiao() {
                    uni.navigateBack({
                         delta: 1
                    })
               },
               quxiao(){
                     this.$refs.iftj.close()
               },
               queding(){
                    uni.navigateBack({
                         delta: 1
                    })
                    this.$refs.iftj.close()
               },
               yes() {
                    if(this.from.is_client==1&&this.from.client_type == 2){
                         this.$refs.iftj.open('center')
                         return
                    }
                    savent(this.from).then((res)=>{
						console.log(res,"res")
						uni.showToast({
							title:res.message
						})
						setTimeout(()=>{
							uni.navigateBack()
						},2000)
                    }).catch((re)=>{
                         uni.showToast({
                              title: re,
                              icon: 'none'
                         })
                    })
                    
               }
               
          }
     }
</script>

<style lang="scss">
     /deep/.uni-radio-input.uni-radio-input-checked {
          background-color: #E33C21 !important;
     }

     .oerter {
          width: 600rpx;
          background-color: #fff;
          padding: 0rpx 40rpx;
          border-radius: 25rpx;

          h3 {
               text-align: center;
               padding: 20rpx 0rpx;
          }

          .manerer {
               input {
                    height: 90rpx;
                    margin-top: 20rpx;
                    // padding: 40rpx 20rpx;
                    padding-left: 20rpx;
                    background-color: #f7f8fa;
               }
          }

          div {
               margin-top: 10rpx;
               display: flex;
               align-items: center;
               padding: 30rpx 30rpx;
               justify-content: space-between;

               view {
                    border-radius: 50rpx;
                    text-align: center;
                    padding: 20rpx 0rpx;
                    width: 200rpx;
                    font-size: 30rpx;
               }

               view:nth-child(1) {
                    color: #E33C21;
                    border: 2rpx solid #E33C21;
               }

               view:nth-child(2) {
                    background-color: #E33C21;
                    color: #fff;
               }
          }
     }

     .biao {
          width: 600rpx;
          background-color: #fff;
          padding: 0rpx 20rpx;
          border-radius: 25rpx;

          h3 {
               text-align: center;
               border-bottom: 1rpx solid #eee;
               padding: 20rpx 0rpx;
          }

          .dsbq {
               padding: 30rpx 0rpx;

               span {
                    background-color: #eee;
                    padding: 5rpx 20rpx;
                    border-radius: 50rpx;
               }
          }

          div {
               display: flex;
               justify-content: space-between;
               padding: 30rpx 30rpx;

               view {
                    border-radius: 50rpx;
                    text-align: center;
                    padding: 20rpx 0rpx;
                    width: 200rpx;
                    font-size: 30rpx;
               }

               view:nth-child(1) {
                    color: #E33C21;
                    border: 2rpx solid #E33C21;
               }

               view:nth-child(2) {
                    background-color: #E33C21;
                    color: #fff;
               }
          }
     }

     page {
          background-color: #fff;
     }

     .qued {
          margin: auto;
          width: 464rpx;
          height: 96rpx;
          border-radius: 48rpx;
          background: #e33c21;
          box-shadow: 0 12rpx 36rpx rgba(193, 0, 0, 0.1);
          font-family: "PingFang SC SNaNrpxibold";
          font-weight: 600;
          font-size: 34rpx;
          line-height: 96rpx;
          text-align: center;
          color: #fff;
          margin-bottom: 30rpx;
     }

     .no {
          margin: auto;
          width: 464rpx;
          height: 96rpx;
          border-radius: 48rpx;
          background: transparent;
          border: 2rpx solid #e33c21;
          font-family: "PingFang SC";
          font-weight: 400;
          font-size: 34rpx;
          text-align: center;
          color: #e33c21;
          line-height: 96rpx;
          margin-bottom: 30rpx;
     }

     .xingxi {
          padding: 0rpx 48rpx;

          .oinput {
               padding: 32rpx 0rpx;
               border-bottom: 1rpx solid #f5f5f5;
               display: flex;
               justify-content: space-between;
               align-items: center;

               span:nth-child(1) {
                    font-family: "PingFang SC SNaNrpxibold";
                    font-weight: 600;
                    font-size: 32rpx;
                    line-height: 44rpx;
                    text-align: left;
                    color: #161616;

                    .redxx {
                         font-weight: 600;
                         font-size: 32rpx;
                         line-height: 44rpx;
                         text-align: left;
                         color: #e33c21;
                    }
               }

               span:nth-child(2) {
                    input {
                         text-align: right;
                         font-family: "PingFang SC";
                         font-weight: 400;
                         font-size: 32rpx;
                         line-height: 44rpx;
                         color: #666;
                    }
               }
          }
     }

     .enter {
          padding: 0rpx 48rpx;
          border-top: 20rpx solid #f7f8fa;

          .odiv {
               margin-bottom: 20rpx;
               width: 658rpx;
               height: 60rpx;
               border-radius: 8rpx;
               background: #f7f8fa;

               span {
                    margin-left: 20rpx;
                    font-family: "PingFang SC";
                    font-weight: 400;
                    font-size: 20rpx;
                    line-height: 60rpx;
                    text-align: left;
                    color: #999;
               }
          }

          .oinput {
               padding: 32rpx 0rpx;
               border-bottom: 1rpx solid #f5f5f5;
               display: flex;
               justify-content: space-between;
               align-items: center;

               span:nth-child(1) {
                    font-family: "PingFang SC SNaNrpxibold";
                    font-weight: 600;
                    font-size: 32rpx;
                    line-height: 44rpx;
                    text-align: left;
                    color: #161616;

                    .redxx {
                         font-weight: 600;
                         font-size: 32rpx;
                         line-height: 44rpx;
                         text-align: left;
                         color: #e33c21;
                    }
               }

               span:nth-child(2) {
                    font-family: "PingFang SC";
                    font-weight: 400;
                    font-size: 32rpx;
                    line-height: 44rpx;
                    text-align: left;
                    color: #999;

                    input {
                         text-align: right;
                         font-family: "PingFang SC";
                         font-weight: 400;
                         font-size: 32rpx;
                         line-height: 44rpx;
                         color: #666;
                    }

                    image {
                         margin-left: 15rpx;
                         width: 16rpx;
                         height: 32rpx;
                         vertical-align: middle;
                    }
               }
          }
     }

     .biaoqian {
          padding: 20rpx 0rpx;

          span {
               background-color: #eee;
               border-radius: 50rpx;
               padding: 5rpx 20rpx;

          }
     }

     .oview {
          width: 654rpx;
          height: 348rpx;
          text-align: center;
          background-color: #fff;
          border-radius:25rpx;

          .yesno {
               padding: 40rpx 48rpx;
               display: flex;
               justify-content: space-between;

               div:nth-child(1) {
                    width: 262rpx;
                    height: 88rpx;
                    border-radius: 44rpx;
                    background: transparent;
                    border: 2rpx solid #e33c21;
                    font-family: "PingFang SC";
                    font-weight: 400;
                    font-size: 28rpx;
                    line-height: 88rpx;
                    text-align: center;
                    color: #e33c21;
               }

               div:nth-child(2) {
                    width: 260rpx;
                    height: 88rpx;
                    border-radius: 44rpx;
                    background: #e33c21;
                    box-shadow: 0 6rpx 24rpx rgba(193, 0, 0, 0.1);
                    font-family: "PingFang SC";
                    font-weight: 400;
                    font-size: 28rpx;
                    line-height: 88rpx;
                    text-align: center;
                    color: #fff;
               }
          }

          span {
               font-family: "PingFang SC Medium";
               font-weight: 600;
               font-size: 32rpx;
               line-height: 44rpx;
               color: #161616;
               line-height: 78rpx;
          }

          p {
               color: rgba(22, 22, 22, 1);
               font-size: 28rpx;
               font-face: PingFang SC;
               font-weight: 400;
               letter-spacing: 0;

               span {
                    font-size: 28rpx;
                    font-face: PingFang SC;
                    font-weight: 400;
                    letter-spacing: 0;
                    color: #E33C21;
               }
          }
     }
</style>
